import React from "react";
// import { Checkbox } from 'antd';
import { equals, isEmpty } from "@cbd/utils";
import styles from "./RightContent.less";

import Required from "./itemcomponent/Required";
import ItemInput from "./itemcomponent/ItemInput";
import ItemTextArea from "./itemcomponent/ItemTextArea";
import OptionAdd from "./itemcomponent/OptionAdd";
import TextConfig from "./ItemConfigComponent/TextConfig";
import NumberConfig from "./ItemConfigComponent/NumberConfig";
import DateConfig from "./ItemConfigComponent/DateConfig";
import UploadConfig from "./ItemConfigComponent/UploadConfig";
import { typeNameObj } from "../ItemDefaultConfig";
import { openNotificationWithIcon } from "../../../../utils/comm";

const isTrue = true;
const modePattern = /^[a-zA-Z_][a-zA-Z_0-9-]*$/;
const errReturn = (msg) => ({ valid: false, msg });

class RightContent extends React.Component {
  // constructor(props) {
  //   super(props);
  // }
  state = {};

  openNotificationWithIcon = openNotificationWithIcon.bind(this);

  componentDidMount() {}

  shouldComponentUpdate(nextProps, nextState) {
    const { selectedItem, style, formConfig } = this.props;
    const res =
      !equals(nextProps.selectedItem, selectedItem) ||
      !equals(nextProps.style, style) ||
      !equals(nextProps.formConfig, formConfig) ||
      !equals(nextState, this.state);
    return res;
  }

  checkKey = (value) => {
    /*
    if(!modePattern.test(value)){
      this.openNotificationWithIcon('warning', '', `表单编码输入格式不正确（由字母、数字、下划线、中划线，且以字母或者下划线开头），请修改后保存`);
    }
    */
    this.handleFormChange("key", value, true);
  };

  // 基础改变
  handleBaseChange = (name, value, isCleanState = false) => {
    const { selectedItem, handleItemChange } = this.props;
    if (handleItemChange instanceof Function) {
      const newItem = {};
      newItem[name] = value;
      handleItemChange({ ...selectedItem, ...newItem });
      if (isCleanState) {
        this.handleInputChange(name, "", true);
      }
    }
  };

  // 单选，复选，下拉更新option param
  handleOptionsChange = (value) => {
    const { selectedItem, handleItemChange } = this.props;
    if (handleItemChange instanceof Function) {
      handleItemChange({ ...selectedItem, ...value });
    }
  };

  // 表单配置项改变
  handleFormChange = (name, value, isCleanState = false) => {
    const { formConfig, handleFormChange } = this.props;
    if (handleFormChange instanceof Function) {
      const newItem = {};
      newItem[name] = value;
      handleFormChange({ ...formConfig, ...newItem });
      if (isCleanState) {
        this.handleInputChange(name, "", true);
      }
    }
  };

  // 输入框改变
  handleInputChange = (name, value, isJustSet = false) => {
    const newState = {};
    newState[name] = isJustSet ? value : value || "%empty";
    this.setState({ ...newState });
  };

  // 获取输入框显示
  getInputViewValue = (name, itemValue) => {
    const { state } = this;
    const stateValue = state[name] || "";
    let resValue = stateValue;
    if (!stateValue) {
      resValue = itemValue;
    } else if (stateValue === "%empty") {
      resValue = "";
    } else {
      resValue = stateValue;
    }
    return resValue;
  };

  render() {
    const { className = "", style = {}, selectedItem, formConfig } = this.props;
    const { type } = selectedItem;
    const isShowPageConfig = isEmpty(selectedItem);

    return (
      // <div className={`${styles.right_box} ${className} ${!selectedItem.id ? styles.box_hidden : ''}`} style={style}>
      <div className={`${styles.right_box} ${className}`} style={style}>
        {isShowPageConfig && (
          <div className="content_config">
            <div className={styles.title}>表单配置</div>
            <div className={styles.right_content}>
              <ItemInput
                className={styles.fields_item}
                label="表单名称："
                maxLength={20}
                required="true"
                value={this.getInputViewValue("name", formConfig.name)}
                onChange={(value) => this.handleInputChange("name", value)}
                onBlur={(value) => this.handleFormChange("name", value, true)}
                validate={(v = "") => {
                  if (!v.trim()) {
                    return errReturn("请输入表单名称");
                  }
                  if (v.length > 20) {
                    return errReturn("请不要输入超过20个字符");
                  }
                  return { valid: true };
                }}
              />
              <ItemInput
                className={styles.fields_item}
                label="表单编码："
                required="true"
                maxLength={20}
                value={this.getInputViewValue("key", formConfig.key)}
                onChange={(value) => this.handleInputChange("key", value)}
                // onBlur={(value) => this.handleFormChange('key', value, true)}
                onBlur={this.checkKey}
                validate={(v = "") => {
                  if (!v.trim()) {
                    return errReturn("请输入表单编码");
                  }
                  if (v.length > 20) {
                    return errReturn("请不要输入超过20个字符");
                  }
                  if (!modePattern.test(v)) {
                    return errReturn(
                      "支持字母、数字、下划线、中划线，须以字母或者下划线开头",
                    );
                  }
                  return { valid: true };
                }}
              />
              <ItemTextArea
                className={styles.fields_item}
                label="表单说明："
                value={this.getInputViewValue(
                  "description",
                  formConfig.description,
                )}
                onChange={(value) =>
                  this.handleInputChange("description", value)
                }
                onBlur={(value) =>
                  this.handleFormChange("description", value, true)
                }
                validate={(v = "") => {
                  if (v.length > 100) {
                    return errReturn("请不要输入超过100个字符");
                  }
                  return { valid: true };
                }}
              />
            </div>
          </div>
        )}
        {!isShowPageConfig && (
          <div className="item_config">
            <div className={styles.title}>{typeNameObj[type] || "控件"}</div>
            <div className={styles.right_content}>
              <Required
                className={styles.fields_item}
                value={selectedItem.required}
                onChange={(value) => this.handleBaseChange("required", value)}
              />
              <ItemInput
                className={styles.fields_item}
                required="true"
                label="控件编码："
                value={this.getInputViewValue("code", selectedItem.code)}
                onChange={(value) => this.handleInputChange("code", value)}
                onBlur={(value) => this.handleBaseChange("code", value, true)}
                maxLength={20}
              />
              <ItemInput
                className={styles.fields_item}
                required="true"
                label="控件标题："
                value={this.getInputViewValue("name", selectedItem.name)}
                onChange={(value) => this.handleInputChange("name", value)}
                onBlur={(value) => this.handleBaseChange("name", value, true)}
                maxLength={20}
              />
              {(type === "userRadio" || type === "functional-group") && (
                <ItemInput
                  className={styles.fields_item}
                  maxLength={100}
                  label="提示信息："
                  value={this.getInputViewValue(
                    "placeholder",
                    selectedItem.placeholder,
                  )}
                  onChange={(value) =>
                    this.handleInputChange("placeholder", value)
                  }
                  onBlur={(value) => {
                    this.handleBaseChange("placeholder", value, true);
                  }}
                />
              )}

              {(type === "text" || type === "multi-line-text") && (
                <TextConfig
                  getInputViewValue={this.getInputViewValue}
                  onChange={this.handleInputChange}
                  onBlur={this.handleBaseChange}
                  className={styles.fields_item}
                  selectedItem={selectedItem}
                />
              )}
              {type === "radio-buttons" && (
                <OptionAdd
                  className={styles.fields_item}
                  required="true"
                  label="选项配置："
                  defaultValue={selectedItem.defaultValue}
                  options={selectedItem.options || []}
                  onChange={(value) => this.handleBaseChange("options", value)}
                  onDefaultChange={(value) =>
                    this.handleBaseChange("defaultValue", value)
                  }
                  selectedItem={selectedItem}
                  handleOptionsChange={this.handleOptionsChange}
                />
              )}
              {type === "dropdown" && (
                <OptionAdd
                  className={styles.fields_item}
                  required="true"
                  label="选项配置："
                  defaultValue={selectedItem.defaultValue}
                  options={selectedItem.options || []}
                  onChange={(value) => this.handleBaseChange("options", value)}
                  onDefaultChange={(value) =>
                    this.handleBaseChange("defaultValue", value)
                  }
                  selectedItem={selectedItem}
                  handleOptionsChange={this.handleOptionsChange}
                />
              )}
              {type === "boolean" && (
                <OptionAdd
                  className={styles.fields_item}
                  required="true"
                  label="选项配置："
                  multiple={isTrue}
                  defaultValue={selectedItem.defaultValue}
                  options={selectedItem.options || []}
                  onChange={(value) => this.handleBaseChange("options", value)}
                  onDefaultChange={(value) =>
                    this.handleBaseChange("defaultValue", value)
                  }
                  selectedItem={selectedItem}
                  handleOptionsChange={this.handleOptionsChange}
                />
              )}
              {(type === "integer" || type === "decimal") && (
                <NumberConfig
                  getInputViewValue={this.getInputViewValue}
                  onChange={this.handleInputChange}
                  onBlur={this.handleBaseChange}
                  className={styles.fields_item}
                  selectedItem={selectedItem}
                />
              )}
              {type === "date" && (
                <DateConfig
                  getInputViewValue={this.getInputViewValue}
                  onChange={this.handleInputChange}
                  onBlur={this.handleBaseChange}
                  className={styles.fields_item}
                  selectedItem={selectedItem}
                />
              )}
              {type === "upload" && (
                <UploadConfig
                  getInputViewValue={this.getInputViewValue}
                  onChange={this.handleInputChange}
                  onBlur={this.handleBaseChange}
                  className={styles.fields_item}
                  selectedItem={selectedItem}
                />
              )}
            </div>
          </div>
        )}
      </div>
    );
  }
}
export default RightContent;
